<template>
  <div class="wrapper container">
    <div class="control">
      <div class="arrow">
        <img src="../assets/image/top.png" alt="">
      </div>
      <div class="flex-between">
        <div class="arrow">
          <img src="../assets/image/left.png" alt="">
        </div>
        <div class=""></div>
        <div class="arrow">
          <img src="../assets/image/right.png" alt="">
        </div>
      </div>
      <div class="arrow">
        <img src="../assets/image/bottom.png" alt="">
      </div>
    </div>
    <div class="connect flex-center">
      <mu-button large class="connect-btn" @click="endConnecte()">断开连接</mu-button>
    </div>
  </div>
</template>
<style lang="less" scoped>
@import url('../assets/less/index.less');
.container {
  padding: 0 .5rem;
}
.control {
  padding-top: 2rem;
}
.arrow {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 auto;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
<script>
  export default {
    data() {
      return {
        status: true
      }
    },
    methods:{
      endConnecte() {
        this.$router.push('./login')
      }
    }
  }
</script>
